<template>
  <view class="price-display">
    <text v-if="showSymbol" class="currency">{{ currency || '¥' }}</text>
    <text class="price" :class="{ 'large': size === 'large' }">
      {{ formatPrice }}
    </text>
    <text v-if="showOriginal && originalPrice" class="original-price">
      {{ currency || '¥' }}{{ originalPrice }}
    </text>
  </view>
</template>

<script>
export default {
  name: 'PriceDisplay',
  props: {
    price: {
      type: [Number, String],
      required: true
    },
    originalPrice: {
      type: [Number, String],
      default: 0
    },
    currency: {
      type: String,
      default: '¥'
    },
    showSymbol: {
      type: Boolean,
      default: true
    },
    showOriginal: {
      type: Boolean,
      default: false
    },
    size: {
      type: String,
      default: 'normal', // normal, large
      validator: value => ['normal', 'large'].includes(value)
    }
  },
  computed: {
    formatPrice() {
      const num = Number(this.price)
      return num.toFixed(2)
    }
  }
}
</script>

<style lang="scss" scoped>
.price-display {
  display: flex;
  align-items: baseline;
  line-height: 1;
}

.currency {
  font-size: 24rpx;
  color: #ff4757;
  margin-right: 4rpx;
}

.price {
  font-size: 32rpx;
  font-weight: bold;
  color: #ff4757;
  
  &.large {
    font-size: 40rpx;
}
}

.original-price {
  font-size: 24rpx;
  color: #999;
  text-decoration: line-through;
  margin-left: 12rpx;
}
</style>